<template>
  <div style="background: #F2F2F2">
    <div class="main-wrapper" style="overflow: auto;">
      <!-- Swiper -->
      <div class="swiper-container" v-if="noticeVos.length > 0">
        <div class="swiper-wrapper">
          <swiper class="swiper-inner"
                  :indicator-dots="indicator"
                  :current="cur"
                  :circular="circular"
                  :autoplay="autoplay"
                  :interval="interval"
                  :duration="duration">
            <block v-for="(item,index) in noticeVos" :index="index" :key="index">
              <swiper-item class="swiper-item">
                <div class="item-img">
                  <image :class="{selected:cur==index}" class="banner-img" :src="item.imgUrl"></image>
                </div>
              </swiper-item>
            </block>
          </swiper>
        </div>
      </div>
      <div class="List" v-if="data.length > 0">
        <div class="card"
            v-for="item in data"
            :key="item.id"
            @click.stop.prevent="goDetails(item.id,item.productType)">
          <img class="card-bg" src="/static/images/shop-item-bg.png"/>
          <div class="card-main">
            <div class="content">
              <div class="left">
                <div>
                  <text>¥</text>
                  <text class="price">{{item.productPrice}}</text>
                </div>
              </div>
              <div class="middle">
                <div class="tag">
                  <span>{{item.productTitle}}</span>
                </div>
              </div>
              <div class="right">
                <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/goumai.png" />
              </div>
            </div>
            <div class="alert">
              {{item.productDesc}}
            </div>
          </div>
        </div>
      </div>
      <!-- <ul class="list">
        <li v-for="item in data"
            :key="item.id"
            @click.stop.prevent="goDetails(item.id,item.productType)">
          <img class="icon"
               v-if="item.productLabel==0?false:true"
               :src="item.productLabel==1?'https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/label_c.png':item.productLabel==2?'https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/tehui.png':item.productLabel==3?'./img/tuijian.png':''">
          <div class="h1">{{item.productTitle}}</div>
          <img class="itemImg" :src="item.productImage">
          <img class="imgBg" src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/yuanhu.png">
          <div class="h2">{{item.productDesc}}</div>
          <div class="p">低至 ¥ {{item.productPrice}}</div>
        </li>
      </ul> -->
      <div class="no" v-if="data.length==0?true:false">
        <section>
          <img src="https://klcx-bucket.oss-cn-beijing.aliyuncs.com/klcx-xcx/ico/shangpin.png">
          <p>暂无商品 敬请期待</p>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
  import Service from '@/utils/service'

  export default {
    data () {
      return {
        indicator: true, //是否显示指示点
        interval: 5000,  //自动切换时间间隔
        duration: 600,  //滑动动画时长
        circular: true, //是否采用衔接滑动
        autoplay: false, //是否自动滑动
        cur: 0,         //当前所在滑块的index
        product_notice: [],
        data: '',
        noticeVos: [
          {imgUrl:''},
        ]
      }
    },
    onUnload() {

    },
    onLoad(options) {

    },
    onShow(){
      this.getProductList()
      this.getNotice()
    },
    methods: {
      goDetails(productId, paymentType) {
        wx.navigateTo({
          url: "/pages/cardShopDetail/main?productId=" + productId + "&paymentType=" + paymentType
        });
      },
      getProductList() {
        Service.getProductList().then((res)=>{
          if (res.code == 200) {
            this.data = res.data
            this.data.forEach((item) => {
              item.productPrice = Number(item.productPrice).toFixed(2)
            })
          }
        })
      },
      getNotice(){
        let data = {
          adPosition: '11',
        }
        Service.getNotice(data).then((res)=>{
          if (res.code == 200) {
            this.noticeVos = res.data.noticeVos
          }
        })
      },
      number2(num) {
        return Number(num).toFixed(2)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .main-wrapper
    min-height 100vh
    background: #F2F2F2
  .swiper-container
    margin: 0 auto;
    position: relative;
    top: .3rem;
    left: 0;
    right: 0;
    width: 6.9rem;

  .swiper-wrapper
    position: relative
    width: 100%

  .swiper-inner
    width: 6.9rem;
    height 312px
    overflow hidden

  .item-img
    width: 6.9rem;
    height 312px

  .banner-img
    display block
    width: 6.9rem;
    height 312px
    margin 0 auto

  .dots
    width 100%
    height 6px
    text-align center
    padding-top 16px

  .dot
    display inline-block
    margin: 0 7px;
    width 10px
    height: 8px
    background #ccc
    border-radius 4px
    vertical-align top
    &.active
      width 20px
      background #FD1C43

  .list {
    display: flex;
    padding: .6rem .3rem .3rem;
    box-sizing: border-box;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
  }

  .list li {
    width: 3.3rem;
    background: #fff;
    border-radius: .1rem;
    margin-bottom: .3rem;
    position: relative;
    padding: .14rem 0;
  }

  .List {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 80px);
    padding: 30px;
    background: #F6F6F6;
    box-sizing: border-box;
    margin-top: 8px;
  }
  .card{
    position: relative;
    margin-bottom: 30px;
    overflow: auto;
  }
  .card-bg{
    width: 700px;
    height: 212px;
    vertical-align: top;
  }
  .card-main{
    display: block;
    position: absolute;
    left:0;
    top:0;
    width: 700px;
    height: 212px;
    justify-content: space-between;
  }
  .card-main .content {
    display: block;
    width: 100%;
    height: 155px;
  }
  .card-main .alert {
    display: block;
    height: 55px;
    line-height: 60px;
    color: #ff9c00;
    padding-left: 28px;
  }
  .card-main .content .left {
    display: block;
    float: left;
    width: 150px;
    height: 155px;
    text-align: center;
  }
  .card-main .content .left text {
    height: 75px;
    line-height 75px;
    font-size: 24px;
    color: #f6390d;
  }
  .card-main .content .left text.price {
    height: 155px;
    line-height 155px;
    font-size: 40rpx;
  }
  .card-main .content .left .tag {
    font-size: 24px;
  }
  .card-main .content .middle {
    display: block;
    float: left;
    width: 325px;
    height: 155px;
    line-height 155px;
    padding-left: 10px;
  }
  .card-main .content .middle img {
    width: 90px;
    height: 30px;
  }
 
  .card-main .content .middle .time {
    margin-top: 14px;
    color: #8c8c8b;
    font-size: 24px;
  }
  .card-main .content .right {
    display: block;
    float: right;
    width: 170px;
    height: 155px;
  }
  .card-main .content .right img {
    width: 156px;
    height: 70px;
    margin: 0 auto;
    margin-top: 80px;
  }
  .icon {
    position: absolute;
    right: 0;
    top: 0;
    width: .82rem;
    height: .32rem;
    z-index: 2;
  }

  .itemImg {
    width: 3.04rem;
    height: 1.54rem;
    margin: 0 auto;
  }

  .h2 {
    text-align: center;
    font-size: .26rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: .37rem;
    margin-top: .22rem;
  }

  .p {
    font-size: .26rem;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    line-height: .37rem;
    text-align: center;
    margin-top: .1rem;
  }

  .h1 {
    position: absolute;
    font-size: .34rem;
    font-family: PingFangSC-Medium;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: .5rem;
    left: .4rem;
    top: .4rem;
  }


  .no {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: .8rem;
  }

  .no p {
    font-size: .3rem;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .no img {
    width: 1.15rem;
    height: 1.45rem;
  }
  .imgBg{
    width: 330px;
    height: 36px;
    position: absolute;
    top:1.35rem;
    left: 0
  }
</style>
